<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #fbf9f9;
    }

    .top {
        width: 100%;
        object-fit: scale-down;
        background-color: #fff;
    }

    .nums {
        margin: 0 1rem;
        display: flex;
        justify-content: space-between;
        padding: 1rem 0 0.5rem 0;
        background-color: #fff;
        border-radius: 1rem;
        margin-top: -2rem;
    }

    .nums .item {
        width: 50%;
        box-sizing: border-box;
        text-align: center;
    }

    .nums .item:last-child {
        border-left: 1px solid #ccc;
    }

    .nums .item .title {
        font-size: 0.9rem;
        color: #333;
    }

    .nums .item .num {
        color: #2882e1;
        font-size: 1rem;
        font-weight: bold;
    }

    .line {
        margin: 1rem 0;
        text-align: center;
        font-size: 0.8rem;
    }

    .tips {
        margin: 0 1rem;
        padding: 1rem;
        font-size: 0.8rem;
        background-color: #fff;
    }

    .tips .item .title {
        margin-bottom: 0.3rem;
    }

    .tips .item .title img {
        margin: 0.1rem 0.5rem 0 0;
        width: 1rem;
        height: 1rem;
        float: left;
    }

    .tips .tip {
        padding-top: 0.8rem;
        border-top: 1px dashed #ccc;
    }

    .tips .tip span {
        font-weight: bold;
    }

    .list {
        margin: 0 1rem;
        padding: 1rem;
        background-color: #fff;
        min-height: 4rem;
        margin-bottom: 4rem;
    }

    .none {
        text-align: center;
        font-size: 0.8rem;
    }

    .submit {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        font-size: 0.8rem;
        color: #fff;
        text-align: center;
        background-color: #2882e1;
    }

    .zhezhao {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.8);
        text-align: center;
        overflow: hidden;
    }

    .zhezhao img {
        margin-top: 2rem;
    }

    .zhezhao .btn {
        width: 60%;
        margin: 2rem 20%;
        height: 2rem;
        line-height: 2rem;
        font-size: 0.8rem;
        background-color: #2780e8;
        color: #fff;
        border-radius: 10rem;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="main">
            <img src="../image/yizhen_img.png" alt="" class="top">
            <div class="nums">
                <div class="item">
                    <div class="title">本月已邀请</div>
                    <div class="num">0人</div>
                </div>
                <div class="item">
                    <div class="title">累计邀请</div>
                    <div class="num">0人</div>
                </div>
            </div>

            <div class="line">———— 活动规则 ————</div>

            <div class="tips">
                <div class="item">
                    <div class="title">
                        <img src="../image/icon_jiangli.png" alt="">
                        奖励规则
                    </div>
                    <div class="subtitle">基础奖励：成功邀请1位医生，并成功开方患者下单成功，奖励处方中药费的5%金额</div>
                </div>
                <div class="item" style="margin-bottom: 0.5rem;">
                    <div class="title">
                        <img src="../image/icon_jingshi.png" alt="">
                        邀请要求
                    </div>
                    <div class="subtitle">被邀请的医生通过您分享的链接完成注册，并通过线上审核后，被视为邀请成功，给患者开方成功完成下单视为奖励标准条件</div>
                </div>
                <p class="tip"><span>奖金发放：</span>次日凌晨统一结算，发放奖金明细在我的收入中查看。</p>
            </div>
            <div class="line">————邀请记录————</div>
            <div class="list">
                <div class="item"></div>
                <p class="none">已经没有更多了</p>
            </div>

            <div class="submit" @click="yaoqing">立即邀请医生入驻</div>
        </div>
        <div class="zhezhao" v-if="zhezhao">
            <img :src="'data:image/png;base64,' + imgLink" alt="">
            <div class="btn" @click="save_img">保存图片</div>
        </div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        api.addEventListener({
            name: 'open'
        }, function (ret, err) {
            app.zhezhao = true
        });
        get_ajax("doctor/invite/qrcode", {
            cellphone: $api.getStorage("emp").phone
        }, function (res, err) {
            // alert(JSON.stringify(res))
            if (res.code == 2000) {
                app.imgLink = res.data
            }
        })
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            imgLink: "",
            zhezhao: false,
        },
        methods: {
            yaoqing() {
                sendting("yaoqing")
            },
            save_img() {
                var trans = api.require('trans');
                trans.saveImage({
                    base64Str: app.imgLink,
                    album: true,
                    imgPath: "fs://invite_qrcode.png",
                    imgName: "invite_qrcode.png"
                }, function (ret, err) {
                    if (ret.status) {
                        // alert(JSON.stringify(ret));
                        toast("保存成功")
                        app.zhezhao = false
                    } else {
                        // alert(JSON.stringify(err));
                        toast("保存失败")
                        app.zhezhao = false
                    }
                });
            }
        },

    })
</script>